import { View, Text } from '@tarojs/components'
import { ArrowRight } from '@nutui/icons-react-taro'
import React from 'react'
import './index.less'

export interface ListItemProps {
  /** 左侧图标 */
  icon?: React.ReactNode
  /** 标题 */
  title: string
  /** 副标题 */
  subtitle?: string
  /** 右侧内容 */
  extra?: React.ReactNode
  /** 是否显示箭头 */
  arrow?: boolean
  /** 点击事件 */
  onClick?: () => void
  /** 自定义类名 */
  className?: string
}

/**
 * ListItem 通用列表项组件
 * 用于展示列表项，支持图标、标题、副标题、右侧内容和箭头
 */
const ListItem: React.FC<ListItemProps> = ({
  icon,
  title,
  subtitle,
  extra,
  arrow = false,
  onClick,
  className = '',
}) => {
  return (
    <View className={`list-item ${onClick ? 'clickable' : ''} ${className}`} onClick={onClick}>
      {icon && <View className='list-item-icon'>{icon}</View>}
      <View className='list-item-content'>
        <Text className='list-item-title'>{title}</Text>
        {subtitle && <Text className='list-item-subtitle'>{subtitle}</Text>}
      </View>
      {extra && <View className='list-item-extra'>{extra}</View>}
      {arrow && (
        <View className='list-item-arrow'>
          <ArrowRight size={16} color='#999' />
        </View>
      )}
    </View>
  )
}

export default ListItem

